<template>
	<el-row :gutter="20">
		<el-col :span="8">
			<el-card shadow="hover" :body-style="bodyStyle" style="margin-bottom: 20px;">
				<div class="user-info">
					<img class="profile" :src="imgUrl" alt="头像">
					<div>
						<h2 class="user-name">Admin</h2>
						<p class="user-permission">超级管理员</p>
					</div>
				</div>
				<div class="login">
					<p><span>上次登录时间:</span>2021-7-19</p>
					<p><span>上次登录地点:</span>武汉</p>
				</div>
			</el-card>
			<el-card shadow="hover">
				<el-table :data="tblData" size="small" style="width: 100%; height: 400px; overflow-y: auto;">
					<el-table-column v-for="item in tblLabel" 
						:prop="item.prop" :label="item.label" 
						:key="item.prop"></el-table-column>
				</el-table>
			</el-card>
		</el-col>
		<el-col :span="16">
			<el-row :gutter="20">
				<el-col :span="8" v-for="(item, index) in orders" :key="index">
					<el-card class="ornament-container" :body-style="cardBody">
						<div class="ornament" :style="bgObj(index)">
							<i :class="whichIcon(index)"></i>
						</div>
						<div class="order-info">
							<h2>￥&nbsp;{{ item.money }}</h2>
							<p>{{ item.label }}</p>
						</div>
					</el-card>
				</el-col>
				<el-col :span="24">
					<el-card class="line-container" :body-style="{ height: '230px', padding: 0 }">
						<!-- <div class="echarts-box" ref="linechart"></div> -->
						<basic-echarts class="echarts-box" :isAxisChart="true" :chartData="lineData"></basic-echarts>
					</el-card>
				</el-col>
				<el-col :span="12">
					<el-card :body-style="{ height: '220px', padding: 0 }">
						<!-- <div class="echarts-box" ref="barChart"></div> -->
						<basic-echarts class="echarts-box" :isAxisChart="true" :chartData="barData"></basic-echarts>
					</el-card>
				</el-col>
				<el-col :span="12">
					<el-card :body-style="{ height: '220px', padding: 0 }">
						<!-- <div class="echarts-box" ref="pieChart"></div> -->
						<basic-echarts class="echarts-box" :isAxisChart="false" :chartData="pieData"></basic-echarts>
					</el-card>
				</el-col>
			</el-row>
		</el-col>
	</el-row>
</template>

<script>
import { getTblData, getOrders, getLineData, getBarData, getPieData } from '../../api/http'
import BasicEcharts from '../../components/BasicEcharts.vue'
export default {
	name: 'HomePage',
	components: {
		'basic-echarts': BasicEcharts
	},
	data() {
		return {
			imgUrl: require('../../images/lxy.webp'),
			bodyStyle: {
				padding: '15px'
			},
			cardBody:{ 
				padding: '0px',
				display: 'flex',
				alignItems: 'center'
			},
			tblData: [],
			tblLabel: [
				{
					label: '日期',
					prop: 'date'
				},
				{
					label: '姓名',
					prop: 'name'
				},
				{
					label: '地址',
					prop: 'address'
				}
			],
			orders: [],
			lineData: null,
			barData: null,
			pieData: null
		}
	},
	computed: {
		whichIcon() {
			return function (i) {
				let remainder = (i + 1) % 3;
				let icon = 'el-icon-';
				switch (remainder) {
					case 0:
						icon += 's-goods';
						break; 
					case 1:
						icon += 's-flag';
						break;
					case 2:
						icon += 'star-on';
						break;
				}
				return icon;
			}
		},
		bgObj() {
			return function (i) {
				let remainder = (i + 1) % 3;
				let bg = {};
				switch (remainder) {
					case 0:
						bg.backgroundColor = '#694d9f';
						bg.color = '#dea32c';
						break; 
					case 1:
						bg.backgroundColor = '#afb4db';
						bg.color = '#fdb933';
						break;
					case 2:
						bg.backgroundColor = '#45b97c';
						bg.color = '#7bbfea';
						break;
				}
				return bg;
			}
		}
	},
	mounted() {
		this.renderTbl();
		this.renderOrders();
		this.renderLineChart();
		this.renderBarChart();
		this.renderPieData();
	},
	methods: {
		renderTbl() {
			getTblData().then(res => {
				this.tblData = res.data.tblData;
			}).catch(err => {
				console.log(err);
			});
		},
		renderOrders() {
			getOrders().then(res => {
				this.orders = res.data.list;
			}).catch(err => {
				console.log(err);
			});
		},
		renderLineChart() {
			getLineData().then(res => {
				const { date: xData, list } = res.data.lines;
				const legendData = Object.keys(list[0]);
				const series = [];
				legendData.forEach(key => {
					series.push({
						name: key,
						type: 'line',
						data: list.map(item => item[key])
					});
				});
				this.lineData = {
					legendData,
					xData,
					series
				}
			}).catch(err => {
				console.log(err);
			});
		},
		renderBarChart() {
			getBarData().then(res => {
				const { bars } = res.data;
				this.barData = {
					legendData: ['价格', '折扣价'],
					xData: this.transferData(bars, 'category'),
					series: [
						{
							name: '价格',
							type: 'bar',
							data: this.transferData(bars, 'price')
						},
						{
							name: '折扣价',
							type: 'bar',
							data: this.transferData(bars, 'discount') 
						}
					]
				}
			})
		},
		renderPieData() {
			getPieData().then(res => {
				const { pies } = res.data;
				this.pieData = {
					legendData: this.transferData(pies, 'name'),
					series: [
						{
							type: 'pie',
							data: pies,
							top: 10
						}
					]
				}
			}).catch(err => {
				console.log(err);
			});
		},
		transferData(data, key) {
			const list = [];
			data = data || [];
			data.forEach((item) => {
				list.push(item[key]);
			});
			return list;
		}
	}
}
</script>

<style lang="less" scoped>
@font12: 12px;
@hp100: 100%;
.user-info{
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #f391a9;
	.profile {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		margin-right: 15px;
	}
	.user-name {
		font-weight: normal;
	}
	.user-permission {
		font-size: @font12;
		color: #f391a9;
	}
}
.login {
	font-size: @font12;
	span {
		color: #f391a9;
		padding-right: 25px;
	}
}
.ornament-container {
	margin-bottom: 20px;
	.ornament {
		width: 60px;
		height: 60px;
		line-height: 60px;
		text-align: center;
		border-radius: 4px;
	}
	.order-info {
		flex: 1;
		text-align: center;
		p {
			font-size: 12px;
			color: #f391a9;
		}
	}
}
.line-container {
	margin-bottom: 20px;
}
.echarts-box {
	height: @hp100
}
</style>